<template>
  <div class="home">
    <div id="container"></div>
  </div>
</template>

<script setup lang="ts">
/**
 *todo 方式1 使用的是https引入方式
 */
import { onMounted, ref } from 'vue'
const zoom = ref(11)
const location = ref([113.371067, 23.083159])
const map = ref(null)
/* const data = reactive({
  scale: '',
}) */
onMounted(() => {
  init()
  toolInit()
})

const init = () => {
  map.value = new AMap.Map('container', {
    viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
    zoom: zoom.value, // 初始化地图层级
    center: location.value, // 初始化地图中心点
    // mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
  })
}
const toolInit = () => {
  const toolBar = new AMap.ToolBar({
    visible: false,
    position: {
      top: '110px',
      right: '40px',
    },
  })
  map.value.addControl(toolBar)
  toolBar.show()
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
}
#container {
  width: 100%;
  height: 100vh;
}
</style>
